<!--
 作者：ex_baiyc
 日期：2016-12-8
 功能：掌大局-产品顾问-筛选组件
 参数：filterOption  接收从父组件中传递过来的默认筛选条件
      pageId 即父组件页面的mkey，根据此值请求当前页需要的筛选条件，
 事件：filterConditions  传递筛选参数到父组件
      品类、平台信息一次性返回，前端做联动；品牌集合及我的关注的品牌异步发送请求获取后渲染
-->

<template>
  <div class="filter-box">
    <div class="opacityDom" @click="hidden" transition="expand2" v-show="$parent.filterOpenState"></div>
    <div class="filter-view" transition="expand" v-show="$parent.filterOpenState">
      <div class="btn-wrap display-flex">
        <!--<span class="btn-cancel flex1" @click="cancel" v-show="brandOpenStatus">返回</span>-->
        <span @click="brandOpenStatus = false,activePT = true,activeMD = false" class="flex1" :class="{'btn-dofilter': activePT}">平台时间</span>
        <span @click="brandOpenStatus = true,activeMD = true,activePT = false" class="flex1" :class="{'btn-dofilter': activeMD}">筛选型号</span>
        <span @click="finshed" v-if="!brandOpenStatus" class="flex1">完成</span>
        <span @click="doFilter" v-if="brandOpenStatus" class="flex1">完成</span>
      </div>
      <ul class="filter-content" v-show="!brandOpenStatus">
        <!-- 时间 -->
        <li class="filter-item clearfix" v-if="$route.name.indexOf('home')==-1">
          <h3 class="title">时间</h3>
          <div class="filter-tab-button">
            <a :class="{'active': showTimeModule === 1}" @click="choiceTimeModule(1)">年度</a>
            <a :class="{'active': showTimeModule === 2}" @click="choiceTimeModule(2)">月度</a>
            <a :class="{'active': showTimeModule === 3}" @click="choiceTimeModule(3)">自定义</a>
          </div>
          <div v-show="showTimeModule === 1">
            <span id="chooseYear" :class="['item', 'flex1', {'item-active' : dateSeg === 'year'}]" @click="setTimeYear">
              <datetime :title="currentYear"
                        confirm-text="确认"
                        :max-year="nowYear"
                        :min-year="2015"
                        cancel-text="取消"
                        year-row="{value}年"
                        month-row="{value}月"
                        day-row="{value}日"
                        @change="changeYear"
                        :value.sync="chooseYear">
              </datetime>年度
            </span>
          </div>
          <!--<div>-->
            <!--<span id="chooseSeason"  :class="['item', 'flex1', {'item-active' : dateSeg === 'season'}]" @click="setTimeSeason">-->
              <!--<datetime title="季度" -->
                        <!--confirm-text="确认"-->
                        <!--cancel-text="取消"-->
                        <!--year-row="{value}年"-->
                        <!--month-row="{value}季度"-->
                        <!--:value.sync="chooseSeason">-->
              <!--</datetime>季度-->
            <!--</span>-->
          <!--</div>-->
          <div v-show="showTimeModule === 2">
            <!--<span id="chooseMonth"  :class="['item', 'flex1', {'item-active' : dateSeg === 'month'}]" @click="setTimeMonth">-->
              <!--<datetime title="按月度"-->
                        <!--:max-year="nowYear"-->
                        <!--:min-year="2015"-->
                        <!--confirm-text="确认"-->
                        <!--cancel-text="取消"-->
                        <!--year-row="{value}年"-->
                        <!--month-row="{value}月"-->
                        <!--@change="changeMonth"-->
                        <!--:value.sync="chooseMonth">-->
              <!--</datetime>月度-->
            <!--</span>-->
            <div class="display-flex" @click="setTimeMonth">
              <div id="chooseMonthStart" class="item flex1 item-date">
                <datetime :title="currentMonth"
                          :max-year="nowYear"
                          :min-year="2015"
                          confirm-text="确认"
                          cancel-text="取消"
                          year-row="{value}年"
                          month-row="{value}月"
                          :value.sync="chooseMonthStart">
                </datetime>开始月份
              </div>
              <span style="padding-top:1.5%;">__</span>
              <div id="chooseMonthEnd" class="item flex1 item-date">
                <datetime :title="currentMonth"
                          :max-year="nowYear"
                          :min-year="2015"
                          confirm-text="确认"
                          cancel-text="取消"
                          year-row="{value}年"
                          month-row="{value}月"
                          :value.sync="chooseMonthEnd">
                </datetime>结束月份
              </div>
            </div>
          </div>
          <div v-show="showTimeModule === 3">
            <div class="display-flex" @click="customData">
              <div id="startDate" class="item flex1 item-date">
                <datetime title="开始时间"
                          confirm-text="确认"
                          :min-year="2015"
                          :max-year="nowYear"
                          :value.sync="startDate"
                          year-row="{value}年"
                          month-row="{value}月"
                          day-row="{value}日"
                          cancel-text="取消"></datetime>
              </div>
              <span style="padding-top:1.5%;">__</span>
              <div id="endDate" class="item flex1 item-date">
                <datetime title="结束时间"
                          confirm-text="确认"
                          :min-year="2015"
                          :max-year="nowYear"
                          :value.sync="endDate"
                          year-row="{value}年"
                          month-row="{value}月"
                          day-row="{value}日"
                          cancel-text="取消"></datetime>
              </div>
            </div>
          </div>
        </li>
        <!--平台-->
        <li class="filter-item clearfix">
          <h3 class="title">平台</h3>
          <div class="">
          <span class="item"
                v-for="item in condition.platforms"
                :id="item.id"
                @click="addToPlatforms($event)"
                :class="[{'item-active' : choosePlatforms.indexOf(item.name) > -1}]">{{item.name}}</span>
          </div>
        </li>
      </ul>

      <ul v-show="brandOpenStatus" class="brand-content">

        <li class="filter-item clearfix">
          <h3 class="title">型号</h3>
          <input type="text" class="key-words" v-model="modelKeyWords" placeholder="型号关键字">
          <!--<button class="btn-chooseBrand" @click="brandOpenStatus = !brandOpenStatus">选择品牌</button>-->
        </li>

        <!--行业单选-->
        <li v-if="allCondition.department_stype === 'radio'" class="filter-item clearfix">
          <h3 class="title">行业</h3>
          <div class="clearfix">
            <span class="item float-left"
                  v-for="item in condition.department"
                  :id="item.departmentId"
                  @click="getCategory('department', $index, item.departmentId)"
                  :class="[{ 'item-active' : $index == departmentActiveIndex}]">{{item.department}}</span>
          </div>
        </li>

        <!--行业多选-->
        <li v-if="allCondition.department_stype === 'checkbox'" class="filter-item">
          <h3 class="title">行业</h3>
          <div class="">
            <span class="item"
                  v-for="item in condition.department"
                  :id="item.departmentId"
                  @click="gextCategory('department', $inde)"
                  :class="[{ 'item-active' : $index == departmentActiveIndex}]">{{item.department}}</span>
          </div>
        </li>

        <!--品类单选-->
        <li v-if="allCondition.category_stype === 'radio'" class="filter-item clearfix">
          <h3 class="title">品类</h3>
          <div class="clearfix multiCategory">
            <span class="item"
                  v-for="item in categorys"
                  :id="item.id"
                  @click="getCategory('category', item.id, item.category)"
                  :class="[{ 'item-active' : item.id == categorysActiveIndex}]">{{item.category}}</span>
          </div>
        </li>

        <!--品类多选-->
        <li v-if="allCondition.category_stype === 'checkbox'" class="filter-item">
          <h3 class="title">品类</h3>
          <div class="multiCategory clearfix" v-for="categorys in condition.department">
            <span class="item"
                  v-for="item in categorys.categorys"
                  :id="item.id"
                  @click="addToCategorys($event)"
                  :class="[{ 'item-active' :  item.id in chooseCategorys }]">{{item.category}}
            </span>
          </div>
        </li>

        <!--品牌多选-->
        <li class="filter-item clearfix">
          <h3 class="title">品牌</h3>
          <div class="subtitle">我的关注<span :class="['float-right', 'btn-slidedown', {'slideUp': !showCollect}]" @click="showCollect = !showCollect"></span></div>
          <p v-if="condition.collectBrands.length == 0" class="tip">暂无关注品牌，可在我->我的关注进行设置</p>
          <div class="clearfix" v-show="showCollect">
            <span class="item"
                  v-for="item in condition.collectBrands"
                  :id="item.id"
                  @click="addToBrands($event)"
                  :class="[{ 'item-active' :  item.brand_id == brandActiveIndex}]">
              {{item.brand}}
            </span>
          </div>
          <div class="subtitle">所有品牌 <span :class="['float-right', 'btn-slidedown', {'slideUp': !showAllBrand}]" @click="showAllBrand = !showAllBrand"></span></div>
          <ul v-for="item in condition.brands" v-show="showAllBrand" class="clearfix">
            <div class="subtitle">{{item[0].pinyinCapital}}</div>
            <div class="clear-fix">
              <li class="item float-left"
                  v-for="brand in item"
                  :id="brand.id"
                  @click="addToBrands($event)"
                  :class="[{ 'item-active' :  brands.indexOf(brand.brand) > -1}]">
                {{brand.brand}}
              </li>
            </div>
          </ul>
        </li>
      </ul>

    </div>

    <!--选择产品弹窗-->
    <div class="product-list" v-show="productShowStatus">

      <h3 class="text-center product-title"><span class="btn-cancel-product leftButton" @click="cancelToChoosePro">  </span>筛选结果</h3>
      <div class="text-center">
        <ul class="productList-brand">
          <li v-for="item in brands" @click="changeBrand(item)"
              :class="[{'brand-active': productBrandActiveIndex == item}]">{{item}}
          </li>
        </ul>
        <div class="productList-product ">
          <div class="thead display-flex">
            <div v-for="item in thead" class="">{{item}}</div>
          </div>
          <div class="tbody">
            <table>
              <!--<tr v-for="row in tableRows | filterBy KeyWordsA" @click="chooseProductA(row, $event)">-->
              <tr v-for="row in tableRows"
                  @click="chooseProductA(row, $event)"
                  :class="[{'product-active': productActiveModel == row.model}]">
                <td v-for="item in gridColumns" v-html="row[item]" :id="$parent.$index">
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <button class="btn-chooseBrand" @click="finshed"> 选择型号 </button>
    </div>

  </div>
</template>

<script>
  import Calendar from 'vux/dist/components/Calendar'
  import Group from 'vux/dist/components/group'
  import Selector from 'vux/dist/components/selector'
  import datetime from 'vux/dist/components/datetime'
  import Cell from 'vux/dist/components/cell'
  import Range from 'vux/dist/components/range'
//  import jRange from '../common/jRange.vue'
//  import '../../../static/lib/jRange/jquery.range.css'
//  import '../../../static/lib/jRange/jquery.range'

//  查找元素是否在数组中存在
  function findObjIndex (arr, obj) {
    if (!(arr instanceof Array)) return -1
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] === obj) {
        return i
      }
    }
    return -1
  }

  // 获取某年某月的最后一天
  function getLastDayOfMonth (dataStr) {
    let year = Number(dataStr.slice(0, 4))
    let month = Number(dataStr.slice(5, 7))
    let date = new Date(year, month - 1, '01')
    date.setDate(1)
    date.setMonth(date.getMonth() + 1)
    let cdate = new Date(date.getTime() - 1000 * 60 * 60 * 24)
    let day = cdate.getDate()
    return dataStr + '-' + (day < 10 ? '0' + day : '' + day)
  }

  /**
   * 获取当前时间年月
   * @param type 1表示xxxx-xx 2表示xxxx年xx月
   */
  function getCurrentMonth (type) {
    let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    month = month < 10 ? '0' + month : '' + month
    if (type === 1) {
      return year + '-' + month
    } else if (type === 2) {
      return year + '年' + month + '月'
    }
  }

  export default {
    components: {Calendar, Group, Selector, datetime, Range, Cell},
    props: ['choosePlatforms', 'choosePlatformsId', 'pageId', 'defaultOrgId', 'defaultCategory', 'defaultCategoryId', 'tabId', 'defaultStartDate', 'defaultEndDate', 'filterButton'],
    data: function () {
      return {
        activePT: true,
        activeMD: false,
        value1: 30,
        showAllBrand: true,
        showCollect: true,
        minSale: 1,
        maxSale: 19000,
        minSalePrice: 1,
        maxSalePrice: 19000,
        minComment: 1,
        maxComment: 19000,
        overMaxSale: 20000,
        overMaxSalePrice: 20000,
        overMaxComment: 20000,
        brands: [],
        modelKeyWords: '',
        gridColumns: ['model', 'sale', 'all_comment'],
        thead: ['型号', '销量', '评论'],
        tableRows: '',
        productShowStatus: false,
        brandOpenStatus: false,
        allCondition: '',
        condition: {
          department: [],
          collectBrands: [],
          platforms: [],
          brands: []
        },
        productBrandActiveIndex: 0,
        department: '',
        departmentActiveIndex: 0,
        categorysActive: '',
        categorysActiveIndex: '',
        platformsActiveIndex: '',
        brandActiveIndex: '',
        productActiveModel: '',
        productActiveModelId: '',
        productActiveBrand: '',
        startDate: '',
        endDate: '',
        chooseTime: '',
        dateSeg: 'year',    // year season month other
        chooseYear: (new Date()).getFullYear() + '-01-01',
        chooseSeason: '',
//        chooseMonth: '',
        chooseMonthStart: '',
        chooseMonthEnd: '',
//       * ************************************以下为多选时
        chooseCategorys: [],
        chooseCategorysID: [],
        chooseBrand: '',
        chooseBrands: [],
        chooseBrandsID: [],
        // choosePlatforms: [],
        // choosePlatformsId: []
        showTimeModule: 1,   // 筛选时间的模式，1：年度、2：月度、3：自定义
        currentYear: (new Date()).getFullYear() + '年',
        currentMonth: getCurrentMonth(2)
      }
    },
    computed: {
      categorys: function () {
        if (this.condition.department[this.departmentActiveIndex]) {
          return this.condition.department[this.departmentActiveIndex].categorys || []
        } else {
          return []
        }
      },
      nowYear: function () {
        return new Date().getFullYear()
      }
    },
    methods: {
      cancel: function () {
        this.brandOpenStatus = false
      },
      cancelToChoosePro: function () {
        this.productShowStatus = false
      },
      chooseProductA: function (row, event) {
        this.productActiveModel = row.model
        this.productActiveModelId = row.model_id
        this.productActiveBrand = row.brand
      },
      changeBrand: function (item) {
        this.productBrandActiveIndex = item
        this.$http.post(window.interface.loadProducts, {
          'category_id': this.categorysActiveIndex,
          'brand': item
        }).then(function (res) {
          var data = res.json()
          // this.brands = data.brands
          this.tableRows = data.products
          this.brandBctiveIndex = data.brands[0]
        })
      },
      hidden: function () {
        this.slideState = false
        var self = this
        this.brandOpenStatus = false
        setTimeout(function () {
          self.$parent.filterOpenState = false
        }, 200)
      },
//      获取筛选条件
      getData: function (params) {
        this.$http.post(window.interface.conditions, params).then((res) => {
          var data = res.json()
          this.allCondition = data
          this.condition.platforms = data.platforms
          this.overMaxSale = data.max_sale
          this.overMaxSalePrice = data.max_sale_price
          this.overMaxComment = data.max_score
          setTimeout(() => {
            this.maxSale = this.overMaxSale
            this.maxSalePrice = this.overMaxSalePrice
            this.maxComment = this.overMaxComment
          }, 2000)
          // 这里默认全选了
          if (this.choosePlatforms === '所有平台') {
            this.choosePlatforms = []
            this.choosePlatformsId = []
            for (let i = 0; i < data.platforms.length; i++) {
              this.choosePlatforms.push(data.platforms[i].name)
              this.choosePlatformsId.push(data.platforms[i].id)
            }
          } else {
            try {
              this.choosePlatforms = this.choosePlatforms.split(',')
              this.choosePlatformsId = this.choosePlatformsId.split(',')
            } catch (error) {
            }
          }
          this.condition.department = data.dcTree
          try {
            this.getCategory('department', this.departmentActiveIndex, this.condition.department[this.departmentActiveIndex].departmentId)
          } catch (error) {
          }
          this.brandActiveIndex = data.collectBrands ? data.collectBrands[0].brand_id : 0
          this.$http.post(window.interface.brands, {category_id: this.categorysActiveIndex}).then((res) => {
            var data = res.json()
            this.condition.collectBrands = data.collectBrands
            this.condition.brands = data.brands
          })
        })
      },
//      联动切换下级分类
      getCategory: function (condition, id, value) {
        switch (condition) {
          case 'department':
            this.department = value
            this.departmentActiveIndex = id
            // this.categorysActiveIndex = this.condition.department[id].categorys[0].id
            // this.categorysActive = this.condition.department[id].categorys[0].category
            this.getCategory('category', this.condition.department[id].categorys[0].id, this.condition.department[id].categorys[0].category)
            break
          case 'category':
            this.categorysActive = value
            this.categorysActiveIndex = id
            this.$http.post(window.interface.brands, {category_id: this.categorysActiveIndex}).then((res) => {
              var data = res.json()
              this.condition.collectBrands = data.collectBrands
              this.condition.brands = data.brands
            })
            break
          case 'brands':
            this.brandActiveIndex = id.target.id
            this.chooseBrand = id.target.innerText
            break
        }
      },
//      选择年
      setTimeYear: function () {
        this.dateSeg = 'year'
        var dpEle = document.querySelectorAll('.dp-container')
        for (var i = 0; i < dpEle.length; i++) {
          if (dpEle[i].style.display === 'block') {
            dpEle[i].querySelectorAll('.dp-content .dp-item')[2].style.display = 'none'
            dpEle[i].querySelectorAll('.dp-content .dp-item')[1].style.display = 'none'
          }
        }
      },
      changeYear: function (val) {
        this.startDate = val.substring(0, 4) + '-1-1'
        this.endDate = val.substring(0, 4) + '-12-31'
      },
//      选择季
      setTimeSeason: function () {
        this.dateSeg = 'season'
        var dpEle = document.querySelectorAll('.dp-container')
        for (var i = 0; i < dpEle.length; i++) {
          if (dpEle[i].style.display === 'block') {
            if (!dpEle[i].querySelectorAll('.dp-content .dp-item')[2]) {
              return
            }
            dpEle[i].querySelectorAll('.dp-content .dp-item')[2].style.display = 'none'
            dpEle[i].querySelectorAll('.dp-content .dp-item')[1].getElementsByClassName('scroller-content')[0].style.transform = 'translate3d(0px, 0px, 0px)'
            var scrollItemEle = dpEle[i].querySelectorAll('.dp-content .dp-item:nth-child(2) .scroller-content .scroller-item')
            for (var j = 4; j < 13; j++) {
              if (scrollItemEle[j]) {
                scrollItemEle[j].style.display = 'none'
              }
            }
          }
        }
      },
      changeSeason: function (val) {
        this.startDate = val.substring(0, 7) + '-1'
        this.endDate = val.substring(0, 7) + '-31'
      },
//      选择月
      setTimeMonth: function () {
        this.dateSeg = 'month'
        var dpEle = document.querySelectorAll('.dp-container')
        for (var i = 0; i < dpEle.length; i++) {
          if (dpEle[i].style.display === 'block') {
            dpEle[i].querySelectorAll('.dp-content .dp-item')[2].style.display = 'none'
          }
        }
      },
      changeMonth: function (val) {
        this.startDate = val.substring(0, 7) + '-1'
        this.endDate = val.substring(0, 7) + '-31'
      },
//      自定义日期
      customData: function () {
        this.dateSeg = 'other'
      },
//    多选平台
      addToPlatforms: function (event) {
        var pltInchooseplatsIndex = findObjIndex(this.choosePlatforms, event.target.innerText)
        if (pltInchooseplatsIndex !== -1) {
          this.choosePlatforms.splice(pltInchooseplatsIndex, 1)
          this.choosePlatformsId.splice(pltInchooseplatsIndex, 1)
          event.target.classList.remove('item-active')
        } else {
          this.choosePlatforms.push(event.target.innerText)
          this.choosePlatformsId.push(event.target.id)
          event.target.classList.add('item-active')
        }
      },
//    多选品类
      addToCategorys: function (event) {
        var catInchooseCatsIndex = findObjIndex(this.chooseCategorys, event.target.innerText)
        if (catInchooseCatsIndex !== -1) {
          this.chooseCategorys.splice(catInchooseCatsIndex, 1)
          this.chooseCategorysID.splice(catInchooseCatsIndex, 1)
          event.target.classList.remove('item-active')
        } else {
          this.chooseCategorys.push(event.target.innerText)
          this.chooseCategorysID.push(event.target.id)
          event.target.classList.add('item-active')
        }
        if (this.allCondition.brand_stype !== 'disabled') {
          this.$http.post(window.interface.brands, {category_id: this.chooseCategorysID.join(',')}).then((res) => {
            var data = res.json()
            this.condition.collectBrands = data.collectBrands
            this.condition.brands = data.brands
          })
        }
      },
//    多选品牌
      addToBrands: function (event) {
        var brdInchooseBrdsIndex = findObjIndex(this.chooseBrands, event.target.innerText)
        if (brdInchooseBrdsIndex !== -1) {
          this.chooseBrands.splice(brdInchooseBrdsIndex, 1)
          this.chooseBrandsID.splice(brdInchooseBrdsIndex, 1)
          event.target.classList.remove('item-active')
        } else {
          this.chooseBrands.push(event.target.innerText)
          this.chooseBrandsID.push(event.target.id)
          event.target.classList.add('item-active')
        }
      },
//      重置,清除所有选择
      reset: function () {
        this.chooseBrands = []
        this.chooseBrandsID = []
        this.chooseCategorys = []
        this.chooseCategorysID = []
        this.choosePlatforms = []
        this.choosePlatformsId = []
        this.departmentActiveIndex = -1
        this.categorysActive = ''
        this.dateSeg = ''
        this.brands = []
        var item = document.getElementsByClassName('item')
        for (let i = 0; i < item.length; i++) {
          item[i].classList.remove('item-active')
        }
//        document.querySelector('#chooseYear .weui_cell').innerHTML = '年度'
//        document.querySelector('#chooseMonth .weui_cell').innerHTML = '月度'
//        document.querySelector('#chooseMonthStart .weui_cell').innerHTML = '开始月份'
//        document.querySelector('#chooseMonthEnd .weui_cell').innerHTML = '结束月份'
//        document.querySelector('#startDate .weui_cell').innerHTML = '开始日期'
//        document.querySelector('#endDate .weui_cell').innerHTML = '结束日期'
      },
//      执行筛选, 点完成按钮后按选择的条件筛选出符合的产品
      doFilter: function () {
        this.activePT = true
        this.activeMD = false
        if (this.categorysActive === '' && this.choosePlatforms.length === 0 && this.chooseCategorys.length === 0 && this.chooseBrands.length === 0) {
          window.alert('请选择条件!')
          return
        }
        if (Date.parse(this.startDate) > Date.parse(this.endDate)) {
          window.alert('结束时间不能早于开始时间!')
          return
        }
//        if (Date.parse(this.endDate) > Date.parse(new Date())) {
//          window.alert('结束时间不能晚于今天!')
//          return
//        }

        this.productShowStatus = true
        this.$dispatch('changeLoadingStatus', true)
        this.getProducts({
          'category_id': this.categorysActiveIndex,
          'brand': this.chooseBrands.join(','), // 品牌
          'model': this.modelKeyWords, // 模糊查询型号关键字
          'min_sale': this.minSale, // 销量范围
          'max_sale': this.maxSale,
          'min_sale_price': this.minSalePrice, // 价格范围
          'max_sale_price': this.maxSalePrice,
          'min_comment': this.minComment, // 评论数范围
          'max_comment': this.maxComment,
          'startTime': this.startDate,
          'endTime': this.endDate
        })
      },
      finshed: function () {
        try {
          this.activePT = true
          this.activeMD = false
          this.productShowStatus = false
          this.brandOpenStatus = false
          this.$parent.filterOpenState = false
          var filterConditions = {
            department: this.condition.department[this.departmentActiveIndex] ? this.condition.department[this.departmentActiveIndex].department : '',
            category: this.categorysActive || '',
            category_id: this.categorysActiveIndex || '',
            platform: this.choosePlatforms.join(',') || '',
            platform_id: this.choosePlatformsId.join(',') || '',
            brandId: this.brandActiveIndex || '',
            brand: this.chooseBrand || '',
            starttime: this.startDate || '',
            endtime: this.endDate || '',
            org_code: this.department || '',
            dateSeg: this.dateSeg
          }
//        品类为多选时取chooseCategorys里的品类和品类ID
          if (this.allCondition.category_stype === 'checkbox') {
            filterConditions.category = this.chooseCategorys.join(',')
            filterConditions.category_id = this.chooseCategorysID.join(',')
            filterConditions.department = ''
          }
//        品牌为多选时取chooseBrans里的品牌和品牌ID
//        if (this.allCondition.brand_stype === 'checkbox') {
          if (true) {
            filterConditions.brand = this.chooseBrands.join(',')
            filterConditions.brandId = this.chooseBrandsID.join(',')
          }
//        判断时间是按那种类型进行选择的，然后对starttime,endtime重新赋值
          switch (this.dateSeg) {
            case 'year':
              filterConditions.starttime = this.chooseYear.substr(0, 4) + '-01-01'
              filterConditions.endtime = this.chooseYear.substr(0, 4) + '-12-31'
              break
//            case 'season':
//              var season = this.chooseSeason.substring(5, 7)
//              var year = this.chooseSeason.substring(0, 4)
//              switch (season) {
//                case '01':
//                  filterConditions.starttime = year + '-01-01'
//                  filterConditions.endtime = year + '-03-31'
//                  break
//                case '02':
//                  filterConditions.starttime = year + '-04-01'
//                  filterConditions.endtime = year + '-06-31'
//                  break
//                case '03':
//                  filterConditions.starttime = year + '-07-01'
//                  filterConditions.endtime = year + '-09-31'
//                  break
//                default:
//                  filterConditions.starttime = year + '-10-01'
//                  filterConditions.endtime = year + '-12-31'
//                  break
//              }
//              break
            case 'month':
              // filterConditions.starttime = this.chooseMonth.substr(0, 7) + '-01'
              // filterConditions.endtime = this.chooseMonth.substr(0, 7) + '-31'
              if (this.chooseMonthStart || this.chooseMonthEnd) {
                // 如果用户只选择了其中一个月则默认为就是该月
                if (!this.chooseMonthStart) {
                  this.chooseMonthStart = this.chooseMonthEnd
                }
                if (!this.chooseMonthEnd) {
                  this.chooseMonthEnd = this.chooseMonthStart
                }
                filterConditions.starttime = this.chooseMonthStart.substr(0, 7) + '-01'
                filterConditions.endtime = getLastDayOfMonth(this.chooseMonthEnd.substr(0, 7))
              } else {
                filterConditions.starttime = getCurrentMonth(1) + '-01'
              }
              break
            default:
              break
          }
          filterConditions['brand'] = this.productActiveBrand
          filterConditions['model'] = this.productActiveModel
          filterConditions['model_id'] = this.productActiveModelId
          this.$dispatch('filterConditions', filterConditions)
        } catch (err) {
          console.error(err)
        }
      },
      getProducts: function (params) {
        this.$dispatch('changeLoadingStatus', true)
        this.$http.post(window.interface.loadProducts, params).then((res) => {
          var data = res.json()
          this.brands = data.brands
          this.tableRows = data.products
          this.$dispatch('changeLoadingStatus', false)
        })
      },
      choiceTimeModule (value) {
        if (value === 1) {
          this.setTimeYear()
        } else if (value === 2) {
          this.setTimeMonth()
        } else if (value === 3) {
          this.customData()
        }
        this.showTimeModule = value
      }
    },
    events: {
      'doFilter': function () {
      }
    },
    ready: function () {
      this.activePT = this.filterButton === 'pingtai'
      this.brandOpenStatus = this.activeMD = !this.activePT
      this.$on('loadDataDone', function () {
        var params = {'mkey': this.pageId}
        this.getData(params)
      })
      this.nowYear = new Date().getFullYear()
/*eslint-disable*/
//      $(function(){
//        $('.single-slider').jRange({
//          from: 0,
//          to: 100,
//          step: 1,
//          scale: [0,25,50,75,100],
//          format: '%s',
//          width: 300,
//          showLabels: true,
//          showScale: true
//        });
//        $('.range-slider').jRange({
//          from: 0,
//          to: 100,
//          step: 1,
//          scale: [0,25,50,75,100],
//          format: '%s',
//          width: 300,
//          showLabels: true,
//          isRange : true
//        });
//
//        $("#g1").click(function(){
//          var aa = $(".single-slider").val();
//          alert(aa);
//        });
//        $("#g2").click(function(){
//          var aa = $(".range-slider").val();
//          alert(aa);
//        });
//      });
    },
    watch: {
      filterButton: function () {
        this.activePT = this.filterButton === 'pingtai'
        this.brandOpenStatus = this.activeMD = !this.activePT
        switch (this.filterButton) {
          case 'xinghao':
            if (this.allCondition.category_stype === 'checkbox') {
              document.querySelector('.filter-content').scrollTop = 960
            } else {
              document.querySelector('.filter-content').scrollTop = 300
            }
            break
          case 'pinlei':
            if (this.allCondition.category_stype === 'checkbox') {
              document.querySelector('.filter-content').scrollTop = 300
            } else {
              document.querySelector('.filter-content').scrollTop = 340
            }
            break
          case 'pingtai':
            document.querySelector('.filter-content').scrollTop = 0
            break
          case 'shijian':
            document.querySelector('.filter-content').scrollTop = 0
            break
        }
      },
      defaultStartDate: function (newV) {
        this.startDate = newV
      },
      defaultEndDate: function (newV) {
        this.endDate = newV
      },
      'minSale': function (newV) {
        if (this.maxSale - newV < this.overMaxSale / 10 ) {
          if(newV > this.overMaxSale - this.overMaxSale / 10) {
            this.minSale = newV
            this.maxSale = this.overMaxSale
          } else {
            this.maxSale = newV + this.overMaxSale / 10
          }
        }
      },
      'maxSale': function (newV) {
        if (newV - this.minSale < this.overMaxSale / 10) {
          if(newV < this.overMaxSale / 10){
            this.minSale = 0
            this.maxSale = newV
          } else {
            this.minSale = newV - this.overMaxSale / 10
          }
        }
      },
      'minSalePrice': function (newV) {
        if (this.maxSalePrice - newV < this.overMaxSalePrice / 10 ) {
          if(newV > this.overMaxSalePrice - this.overMaxSalePrice / 10) {
            this.minSalePrice = newV
            this.maxSalePrice = this.overMaxSalePrice
          } else {
            this.maxSalePrice = newV + this.overMaxSalePrice / 10
          }
        }
      },
      'maxSalePrice': function (newV) {
        if (newV - this.minSalePrice < this.overMaxSalePrice / 10) {
          if(newV < this.overMaxSalePrice / 10){
            this.minSalePrice = 0
            this.maxSalePrice = newV
          } else {
            this.minSalePrice = newV - this.overMaxSalePrice / 10
          }
        }
      },
      'minComment': function (newV) {
        if (this.maxComment - newV < this.overMaxComment / 10 ) {
          if(newV > this.overMaxComment - this.overMaxComment / 10) {
            this.minComment = newV
            this.maxComment = this.overMaxComment
          } else {
            this.maxComment = newV + this.overMaxComment / 10
          }
        }
      },
      'maxComment': function (newV) {
        if (newV - this.minComment < this.overMaxComment / 100) {
          if(newV < this.overMaxComment / 100){
            this.minComment = 0
            this.maxComment = newV
          } else {
            this.minComment = newV - this.overMaxComment / 100
          }
        }
      },
      'chooseYear': function (newV) {
        document.querySelector('#chooseYear .weui_cell').innerHTML = this.chooseYear.substring(0, 4) + '年'
//        document.querySelector('#chooseMonth .weui_cell').innerHTML = '按月度'
//        document.querySelector('#chooseMonthStart .weui_cell').innerHTML = '开始月份'
//        document.querySelector('#chooseMonthEnd .weui_cell').innerHTML = '结束月份'
//        document.querySelector('#startDate .weui_cell').innerHTML = '开始日期'
//        document.querySelector('#endDate .weui_cell').innerHTML = '结束日期'
      },
      'chooseSeason': function (newV) {
        // document.querySelector('#chooseSeason .weui_cell').innerHTML = this.chooseSeason.substring(0, 4) + '年' + this.chooseSeason.substring(5, 7) + '季度'
      },
//      'chooseMonth': function (newV) {
//        document.querySelector('#chooseMonth .weui_cell').innerHTML = this.chooseMonth.substring(0, 4) + '年' + this.chooseMonth.substring(5, 7) + '月'
//        document.querySelector('#chooseYear .weui_cell').innerHTML = '按年度'
//        document.querySelector('#startDate .weui_cell').innerHTML = '开始日期'
//        document.querySelector('#endDate .weui_cell').innerHTML = '结束日期'
//      },
      'chooseMonthStart': function (newV) {
        document.querySelector('#chooseMonthStart .weui_cell').innerHTML = this.chooseMonthStart.substring(0, 4) + '年' + this.chooseMonthStart.substring(5, 7) + '月'
//        document.querySelector('#chooseYear .weui_cell').innerHTML = '按年度'
//        document.querySelector('#startDate .weui_cell').innerHTML = '开始日期'
//        document.querySelector('#endDate .weui_cell').innerHTML = '结束日期'
      },
      'chooseMonthEnd': function (newV) {
        document.querySelector('#chooseMonthEnd .weui_cell').innerHTML = this.chooseMonthEnd.substring(0, 4) + '年' + this.chooseMonthEnd.substring(5, 7) + '月'
//        document.querySelector('#chooseYear .weui_cell').innerHTML = '按年度'
//        document.querySelector('#startDate .weui_cell').innerHTML = '开始日期'
//        document.querySelector('#endDate .weui_cell').innerHTML = '结束日期'
      },
      'startDate': function () {
        document.querySelector('#startDate .weui_cell').innerHTML = this.startDate
      },
      'endDate': function () {
        document.querySelector('#endDate .weui_cell').innerHTML = this.endDate
      },
      'defaultOrgId': function (newV) {
        this.department = newV
        setTimeout(() => {
          for (let i = 0; i < this.condition.department.length; i++) {

            if (this.condition.department[i].departmentId === newV) {
              this.departmentActiveIndex = i
              this.categorys = this.condition.department[i].categorys
            }
          }
        }, 1000)
      },
      'defaultCategoryId': function (newV) {
        this.categorysActiveIndex = newV
      },
      'defaultCategory': function (newv) {
        this.categorysActive = newv
      },
//      首页-店铺监控 切换品牌和行业排名时重新获取筛选条件
      'tabId': function (newV) {
        var params = {'mkey': this.pageId}
        if (this.tabId !== '') {
          params['tabId'] = newV
        }
        this.$http.post(window.interface.conditions, params).then((res) => {
          var data = res.json()
          this.allCondition = data
          this.condition.platforms = data.platforms
          this.condition.department = data.dcTree
          this.brandActiveIndex = data.collectBrands ? data.collectBrands[0].brand_id : 0
          this.$http.post(window.interface.brands, {category_id: ''}).then((res) => {
            var data = res.json()
            this.condition.collectBrands = data.collectBrands
            this.condition.brands = data.brands
          })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  /*@import '../../../static/lib/jRange/jquery.range.css'*/
  .filter-box{
    width: 7.5rem;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1010;
  }
  .opacityDom{
    position: fixed;
    left: 0;
    top: 0;
    background: rgb(0,0,0);
    width: 100%;
    height: 100%;
    z-index: 1011;
  }
  .tip {
    margin: 0 auto;
    padding-left: .4rem;
    text-align: left;
    color: #FFD38B;
    background: url('../../../static/img/icon-tip.png') no-repeat center left / .3rem .3rem;
  }

  .filter-content{
    max-height: 85vh;
    overflow-y: scroll;
  }

  .btn-wrap{

    span{
      padding: .25rem;
      text-align: center;
      font-size: .36rem;
      border: 1px solid #e4e4e4;
    }

  }

  .btn-dofilter{
    color: #FFF;
    background: #4A90E2;
  }

  .btn-reset{
    color: #999;
    background: #F5F5F5;
  }

  .btn-cancel{
    float: left;
  }

  .split-line{
    margin: 0 .1rem;
    color: rgba(222, 222, 222, 1);
  }

  .filter-view {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    padding-bottom: 15px;
    background-color: rgba(255, 255, 255, 1);
    overflow-y: scroll;
    z-index: 1012;

    .filter-item {
      padding: .2rem;
      /*border-bottom: 5px solid #f2f2f2;*/
    }

    .title {
      padding-bottom: .1rem;
      margin-top: .1rem;
      margin-bottom: .1rem;
      font-weight: 500;
      font-size: .32rem;
      color: #333;
    }

    .item {
      color: rgba(153, 153, 153, 1);
      display: inline-block;
      margin: .05rem .12rem;
      width: 28%;
      height: .8rem;
      font-size: .28rem;
      line-height: .8rem;
      text-align: center;
      border: 1px solid rgba(228, 228, 228, 1);
      border-radius: .05rem;
      overflow: hidden;
      word-break:keep-all;
      white-space:nowrap;
    }
    .item-active {
      background: rgba(246, 250, 255, 1) url(../../../static/img/filter-active-bg.png) no-repeat right bottom / 18%;
    }

    .btn-complete {
      padding: .2rem 0;
      width: 20VW;
      color: #333;
      text-align: center;
      background: #EEEEEE;
    }

    .item-date {
      height: .8rem;
      line-height: .5rem;
      overflow: hidden;
    }

  }
  .filter-item:nth-last-child(1){
    border:none;
  }
  .multiCategory{
    span{
      display: block;
      float: left;
    }
  }
  /**************************************12-8新增*/
  .btn-chooseBrand{
    display: block;
    margin: 1rem auto .5rem;
    padding: .25rem;
    width: 90%;
    color: rgba(137, 138, 140, 1);
    border: 1px solid #e1e1e1;
    font-size: .36rem;
    border-radius: 3px;
    background: rgba(247, 249, 254, 1);
  }

  /*产品列表*/
  .select-product {
    text-align: center;
  }

  .brand-active {
    background: #4A90E2;
    color: #fff;
    border-right: none;
  }

  .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
  }

  .input-search {
    padding-left: .2rem;
    outline: none;
    height: 100%;
    width: 65%;
    border: transparent;
    background: #f8f8f8;
    border-left: 1px solid #e4e4e4;
  }

  .search-text {
    display: inline-block;
    width: 30%;
    background: #FFF;
  }

  .search-wrap {
    position: relative;
    margin: .2rem auto;
    width: 90%;
    height: 5vh;
    line-height: 5vh;
    overflow-y: scroll;
    background: #fff;
    border: 1px solid #E4E4E4;
    z-index: 2;
    overflow: hidden;
  }

  .product-list {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    background: rgba(255, 255, 255, 1);
    border: 1px solid #eee;
    z-index: 1013;

    &>div {
      display: flex;
      height: 70%;
      border-bottom: .2rem solid #eee;
    }

    .productList-brand {
      width: 21%;
      height: 100%;
      overflow-y: scroll;
      border-right: 1px solid #ddd;
      box-shadow: 4px 0px 5px #e5e5e5;
      z-index: 2;

      li {
        padding: .3rem 0;

      }

    }
  }

  .productList-product {
    width: 79%;
    overflow-y: hidden;

    .thead {
      height: 1rem;
      align-items: center;
      color: #999;
      background: #FAFCFF;

      div:nth-child(1){
        width: 50%;
      }
      div:nth-child(2){
        width: 25%;
      }
      div:nth-child(3){
        width: 25%;
      }
    }

    .tbody {
      height: 62vh;
      overflow-y: scroll;
      color: #666;

      table {
        width: 100%;
        border-spacing: 0;
        color: #666;

        tr {
          height: 1rem;
          // line-height: 1rem;

        }
        tr:nth-child(1){
          td:nth-child(1){
            width: 50%;
          }
          td:nth-child(2){
            width: 25%;
          }
          td:nth-child(3){
            width: 25%;
          }
        }
        tr.product-active{
          background: #E4F0FF;
          color: #4A90E2;
        }

        td {
          border: 0px;
          vertical-align: middle;
        }

      }
    }
  }

  .product-title{
    position: relative;
    height: 1rem;
    line-height: 1rem;
    font-weight: 500;
    font-size: .4rem;
    color: #000;
    box-shadow: #dddddd 0px 2px 5px;
  }
  .btn-cancel-product{
    position: absolute;
    left: .5rem;
    color: #000;
    font-size: .2rem;
  }

  .key-words{
    display: block;
    margin: .2rem auto;
    padding: .2rem;
    width: 90%;
    color: #999999;
    background: rgba(248, 248, 248, 1);
  }
  /*range*/
  .range{
    position: relative;
    padding-top: .3rem;
  }
  .range-bar .range-min,.range-bar .range-max,.range-quantity {
    display: none !important;
  }
  .result{
    display: flex;
    justify-content: space-between;
    margin-top: .4rem;
  }
  .result>div{
    flex: 1;
    text-align: center;
  }
  .range-title{
    color: #000;
  }
  .btn-slidedown{
    width: .5rem;
    height: .3rem;
    background: url("") no-repeat center / .3rem .3rem;
    transform: rotate(270deg);
    transition: all .3s;
  }
  .slideUp{
    transform: rotate(0deg);
  }

  .subtitle{
    font-size: .32rem;
    margin-top: .1rem;
    margin-bottom: .1rem;
  }

  .brand-content{
    height: 85vh;
    overflow: auto;
  }

  .filter-tab-button {
    margin: .1rem .12rem;
    border: 1px solid #e4e4e4;
    border-radius: .4rem;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    overflow: hidden;

    &:after {
      content: '\20';
      display: block;
      height: 0;
      clear: both;
    }

    a {
      display: block;
      float: left;
      width: 33.3333333%;
      border-left: 1px solid #e4e4e4;
      box-sizing: border-box;
      color: #9b9b9b;
      background-color: #fff;

      &:first-child {
        border-left: none;
      }

      &.active {
        background-color: #f6faff;
      }
    }
  }
  #chooseYear,
  #chooseMonth {
    display: block;
    margin: .15rem .12rem .05rem;
    width: 40%;
    height: .8rem;
    line-height: .8rem;
  }
</style>
<style>
  .vux-popup-mask {
    width: 0 !important;
    height: 0 !important;
  }

  .weui_cell_ft.with_arrow:after{
    display: none !important;
  }
  #chooseYear .weui_cell,#chooseSeason .weui_cell,
  #chooseMonth .weui_cell {
    padding: 0 !important;
    display: block !important;
    text-align: center !important;
    color: #9b9b9b !important;
  }
  #startDate .weui_cell,
  #endDate .weui_cell,
  #chooseMonthStart .weui_cell,
  #chooseMonthEnd .weui_cell {
    display: inline-block;
    width: 100%;
    text-align: center !important;
    color: #9b9b9b !important;
    line-height: 1.6;
    box-sizing: border-box;
  }
  .weui_cell_bd>p{
    color: #9b9b9b;
  }
  .vux-range-input-box{
    margin-right: 20px !important;
    margin-left: 20px !important;
  }
  .range-bar .range-min,.range-bar .range-max,.range-quantity {
    display: none !important;
  }
  .range-handle{
    width: .4rem;
    height: .4rem;
    background: #4A90E2;
    z-index: 1;
  }
  .range-bar{
    background: #F6FAFF;
    border-top: 1px solid #E4E4E4;
    border-left: 1px solid #E4E4E4;
    border-right: 1px solid #E4E4E4;
    border-radius: 5px;
  }
</style>
